/**
 * Created by maxiaoqiang on 2018/7/11.
 */
import React, {Component} from "react";

import { Table, Button, Select, Modal } from 'antd';

import ReactEcharts from 'echarts-for-react';

import {local} from "util/MyUtil";
import {HttpClient} from "util/HttpClient";

const typeData = {
    0:"简单",
    1:"一般",
    2:"难",
    3:"困难"
};

class Grade extends Component{

    constructor(props){
        super(props);
        this.state = {
            visible:false,
            dataSource: [],
            indicator:[]
        };
    }

    componentDidMount(){
        HttpClient.get("/v1/paper/grade?userId="+local.get("userInfo").id)
            .then((response)=>{
                if(response.data.code==200){
                    let daraSource = [];
                    let datas = response.data.data;
                    for(var i in datas){
                        let data = datas[i].paper;
                        data.key = data.id;
                        data.allScore = datas[i].score;
                        daraSource.push(data);
                    }
                    this.setState({
                        dataSource:daraSource
                    })
                }
            });
    }

    getColumns =()=>{
        return(
            [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    align: "center"
                }, {
                    title: '试卷名称',
                    dataIndex: 'name',
                    align: "center"
                }, {
                    title: '难度等级',
                    dataIndex: 'level',
                    align: "center",
                    render: (text, record) => {
                        return (
                            <div>
                                {typeData[record.level]}
                            </div>
                        )
                    }
                }, {
                    title: '及格线',
                    dataIndex: 'total',
                    align: "center",
                    render: (text, record) => {
                        return (
                            <div>
                                {record.passValue}
                            </div>
                        )
                    }
                }, {
                    title: '考试分数 / 总分',
                    dataIndex: 'allScore',
                    align: "center",
                    render: (text, record) => {
                        return (
                            <div>
                                {record.allScore+" / "+record.total}
                            </div>
                        )
                    }
                }, {
                    title: '是否及格',
                    align: "center",
                    render: (text, record) => {
                        return (
                            <div>
                                {parseInt(record.passValue.split("%")[0])/100*record.total>record.allScore?<font color="red">不及格</font>:<font color="#1890ff">及格</font>}
                            </div>
                        )
                    }
                }, {
                    title: '操作',
                    dataIndex: 'operation',
                    align: "center",
                    render: (text, record) => {
                        return (
                            <Button
                                type="primary"
                                onClick={()=>{this.showModal(record.id, record.subjectId)}}
                            >
                                查看分析
                            </Button>
                        )
                    }
                }
            ]
        )
    };

    getOption = () => {
        return {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                x : 'center',
                data:['课程比重分布','掌握情况分布']
            },
            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            polar : [
                {
                    indicator : this.state.indicator,
                    radius : 100
                }
            ],
            series : [
                {
                    name: '完全实况章节数据',
                    type: 'radar',
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: 'default'
                            }
                        }
                    },
                    data : [
                        {
                            value : this.state.chapterScore,
                            name : '课程比重分布'
                        },
                        {
                            value : this.state.userScore,
                            name : '掌握情况分布'
                        }
                    ]
                }
            ]
        }
    };

    showModal = (paperId, subjectId)=>{
        HttpClient.get("/v1/paper/findAll?userId="+local.get("userInfo").id+"&paperId="+paperId+"&subjectId="+subjectId)
            .then((response)=>{
                if(response.data.code==200){
                    // 设置 polar
                    let indicator = [];
                    let data = response.data.data.list;
                    for(let i=0;i<data.chapterList.length;i++){
                        indicator.push({
                            text: data.chapterList[i].name,
                            max: parseInt(Math.max.apply(null,response.data.data.chapterScore)*1.2)
                        });
                    }
                    this.setState({
                        indicator: indicator,
                        visible: true,
                        chapterScore: response.data.data.chapterScore,
                        userScore: response.data.data.userScore
                    });


                }
            })
    };

    handleCancel = (e) => {
        this.setState({
            visible: false
        });
    };


    render(){
        return(
            <div>
                <div>
                    <Table
                        bordered
                        dataSource={this.state.dataSource}
                        columns={this.getColumns()}
                    />
                </div>
                <Modal
                    title="课程掌握分析图"
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    footer={null}
                >
                    <ReactEcharts
                        option={this.getOption()}
                    />
                </Modal>

            </div>
        )
    }

}

export default Grade;